import React, { useEffect, useState } from 'react';
import * as service from '../../api/jiang/index'
import '../../styles/jiang/DataHealth.scss'
import { DatePicker, Space, Table, Select, Radio } from 'antd';
import pic from '../../assets/jiang/tx.jpg'
import { useNavigate } from 'react-router-dom';


interface Props {

}

const { RangePicker } = DatePicker;

function DataHealth(props: Props) {
    const navigate = useNavigate()
    const [lists, setList] = useState([])
    const [loading, setLoading] = useState(false);
    const [listerone, setListerone] = useState([])
    const [listertwo, setListertwo] = useState([])
    const [listerthree, setListerthree] = useState([])
    const [lister, setLister] = useState([])

    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    const rowSelection = {
        onChange: (selectedRowKeys: any, selectedRows: any) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record: any) => ({
            disabled: record.name === 'Disabled User',
            name: record.name,
        }),
    };


    useEffect(() => {
        setLoading(true);
        service.heather_list().then((res) => {
            // console.log(res);
            setList(res.data)
            setLoading(false);
        })

        service.optionlist().then((res) => {
            // console.log(res);
            var arr = res.data.map((item: any) => {
                return { value: item.id, label: item.name }
            })
            setListerone(arr)
        })

        service.teamlist().then((res) => {
            // console.log(res);
            var arr = res.data.map((item: any) => {
                return { value: item.id, label: item.name }
            })
            setListertwo(arr)
        })

        service.teamlistwo().then((res) => {
            // console.log(res);
            var arr = res.data.map((item: any) => {
                return { value: item.id, label: item.name }
            })
            setListerthree(arr)
        })
        service.healthlist().then((res) => {
            // console.log(res);
            var arr = res.data.map((item: any) => {
                return { value: item.id, label: item.name }
            })
            setLister(arr)
        })
        
    }, [])

    const onChange = (value: any, dateString: any) => {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
    };

    const onOk = (value: any) => {
        console.log('onOk: ', value);
    };

    const godetal = () => {
        // 跳转居民详情
        navigate('/index/resident-particulars')
    }
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };


    const columns = [
        {
            title: '编号',
            dataIndex: 'number',
            key: 'number',
        },
        {
            title: '居民信息',
            // dataIndex: 'message',
            key: 'message',
            render: (_: any, row: any) => (
                <Space size="middle">
                    <img src={pic} style={{ borderRadius: '50%' }} alt="" />
                    <span> {row.message}</span>
                </Space>
            ),
        },
        {
            title: '测量时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '数据类型',
            dataIndex: 'type',
            key: 'type',
        },
        {
            title: '数值',
            dataIndex: 'values',
            key: 'values',
        },
        {
            title: '评估',
            dataIndex: 'assess',
            key: 'assess',
        },
        {
            title: '数据来源',
            key: 'source',
            render: (_: any, row: any) => (
                <>
                    <span>用户记录</span>
                </>
            ),
        },
        {
            title: '操作',
            key: 'role',
            render: (_: any, row: any) => (
                <>
                    <span onClick={() => { godetal() }} style={{ color: 'blue' }}>查看详情</span>
                </>
            ),
        },
    ]

    return (
        <div className='data-health' style={{padding:20}}>
            <div className='title'>居民健康异常统计</div>

            <div className='header'>
                <div className='menuheadetr'>
                    <span >数据类型</span>&nbsp;&nbsp;
                    <Select
                    defaultValue="全部"
                    style={{ width: 160 }}
                    onChange={handleChange}
                    options={lister}
                />
                </div>

                <Space direction="vertical" size={12}>
                    <div>
                        <span>选择签约日期</span>&nbsp;&nbsp;
                        <RangePicker
                            showTime={{ format: 'HH:mm' }}
                            format="YYYY-MM-DD HH:mm"
                            onChange={onChange}
                            onOk={onOk}
                        />
                    </div>
                </Space>
            </div>


            <div className='top'>
                <div className='padding'>
                    <span>机构</span>&nbsp;&nbsp;
                <Select
                    defaultValue="全部"
                    style={{ width: 160 }}
                    onChange={handleChange}
                    options={
                        listerone
                    }
                />
                </div>
                <div className='padding'>
                    <span>医生团队</span>&nbsp;&nbsp;
                <Select
                    defaultValue="请选择"
                    style={{ width: 160 }}
                    onChange={handleChange}
                    options={
                        listertwo
                    }
                />
                </div>
                <div className='padding'>
                    <span>医生</span>&nbsp;&nbsp;
                <Select
                    defaultValue="请选择"
                    style={{ width: 160 }}
                    onChange={handleChange}
                    options={
                        listerthree
                    }
                />
                </div>

            </div>



            <div>
                <Radio.Group
                    onChange={({ target: { value } }) => {
                        setSelectionType(value);

                    }}
                    value={selectionType}
                >
                </Radio.Group>
                <Table columns={columns} dataSource={lists} loading={loading}
                    rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                    }}

                />

            </div>

        </div>
    );
}

export default DataHealth;